<!--
 * @Author: your name
 * @Date: 2021-12-20 19:32:31
 * @LastEditTime: 2021-12-22 14:26:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \app\src\views\el\betterScroll\index.vue
-->

<template>
  <div class="better-scroll-dom">
    <div class="menu">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="tolink()"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="wrapper" ref="wrapper">
      <div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item active"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "1" },
        { id: 2, name: "2" },
      ],
      scroll: "",
    };
  },
  mounted() {
    // let wrapper = document.querySelector(".wrapper");
    // this.scroll = new BScroll(wrapper, {
    //   movable: true,
    //   zoom: true,
    // });

    this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {})
      })
  },
  methods: {
    tolink() {
      let el = document.querySelector(".wrapper .active");
      console.log(el);
      console.log(this.scroll)
      this.scroll.scrollToElement(this.scroll,el);
    },
  },
};
</script>

<style lang="less" scoped>
.better-scroll-dom {
  display: flex;
  height: 600px;
  .menu {
    width: 100px;
    background-color: rgb(250, 255, 240);
    height: 100%;
    .item {
      line-height: 20px;
      padding: 10px;
      &:hover {
        color: aqua;
        cursor: pointer;
      }
    }
  }
  .wrapper {
    background-color: antiquewhite;
    height: 600px;
    width: 600px;
    .item {
      height: 300px;
      border-top: 1px solid #ccc;
    }
  }
}
</style>
